<template>
	<view class="home_body">
		<view class="collegeName">欢迎登录贵州电子信息职业技术学院~</view>
		<view class="home_bottom">
			<view class="evolute" @click="navToPage('../evolution/list?type=1')">
				<el-badge :value="noEvaluatedCount" class="item">
				  <el-button class="btn" size="small">待评价</el-button>
				</el-badge>
			</view>
			<view class="evoluted" @click="navToPage('../evolution/list?type=2')">
				  <el-badge :value="evaluatedCount" class="item" type="warning">
				    <el-button class="btn" size="small">已评价</el-button>
				  </el-badge>
			</view>
		</view>
	</view>
</template>

<script>
	const api = require('@/utils/api.js');
	const util = require("@/utils/util.js")
	export default {
		data() {
			return {
				noEvaluatedCount: 0, // 待评价
				evaluatedCount:0, // 已评价
			};
		},
		onShow() {
			this.getCountEvalute()
		},
		methods: {
			// 页面跳转
			navToPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			
			//获取数量
			getCountEvalute() {
				util.requestGet(api.countEvalute).then((res) => {
					if (res.status === 200) {
						this.noEvaluatedCount = res.datas.noEvaluatedCount
						this.evaluatedCount = res.datas.evaluatedCount
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
		background: url('@/static/images/home_bg.png') no-repeat;
		background-size: 100% 100%;
	}
	
	.home_body {
		position: relative;
		overflow: auto;
		height: 100%;
	}
	.collegeName {
		width: 100%;
		position: absolute;
		top: 10%;
		font-size: 18px;
		text-align: center;
		color: #fff;
	}
	.home_bottom {
		margin-top:38%;
	}
	.evolute {
		position: relative;
		width:80%;
		height:340rpx;
		margin:0 auto;
		background: url('@/static/images/evolute.png');
		background-size: 100% 100%;
	}
	.evolute .el-badge{
		position: absolute;
		right:70rpx;
		top:50%;
		transform: translateY(-50%);
	}
	.evolute .btn {
		background-color: #F23740;
		color: #fff;
		font-size: 46rpx;
		height:80rpx;
		padding:10rpx 30rpx;
		border-radius: 20rpx;
	}
	.evoluted {
		position: relative;
		width:80%;
		height:340rpx;
		margin:0 auto;
		margin-top:60rpx;
		background: url('@/static/images/evoluted.png');
		background-size: 100% 100%;
	}
	.evoluted .el-badge{
		position: absolute;
		right:40rpx;
		top:50%;
		transform: translateY(-50%);
	}
	.evoluted .btn {
		background-color: #FFC350;
		color: #fff;
		font-size: 46rpx;
		height:80rpx;
		padding:10rpx 30rpx;
		border-radius: 20rpx;
	}
	
	/deep/ .evolute .el-badge__content, /deep/ .evolute .el-progress.is-exception .el-progress-bar__inner {
		background-color: #F23740!important;
	}
</style>
